<template>
  <div class="container">
  <div class="crowdfunding-detail">
    <!-- 商品基本信息 -->
    <el-card class="product-card">
      <el-row :gutter="20">
        <!-- 左侧图片展示 -->
        <el-col :span="12">
          <!-- 图片预览区 -->
          <ImageView :image-list="productInfo.images"/> 
        </el-col>

        <!-- 右侧信息 -->
        <el-col :span="12">
          <div class="product-info">
            <h1 class="title">{{ productInfo.title }}</h1>
            <p class="desc">{{ productInfo.description }}</p>
            
            <!-- 众筹进度 -->
            <div class="funding-progress">
              <div class="current-amount">
                <span class="number">{{ productInfo.currentAmount }}</span>
                <span class="label">当前金额</span>
              </div>
              <div class="target-amount">
                <span class="number">{{ productInfo.targetAmount }}</span>
                <span class="label">目标金额</span>
              </div>
              <div class="remain-time">
                <span class="number">{{ remainDays }}</span>
                <span class="label">剩余天数</span>
              </div>
              <el-progress 
                :percentage="fundingProgress" 
                :status="progressStatus"
              />
            </div>

            <!-- 发起人信息 -->
            <div class="initiator">
              <span class="label">发起人：</span>
              <span>{{ productInfo.initiator }}</span>
            </div>

            <!-- 众筹时间 -->
            <div class="funding-time">
              <span class="label">众筹时间：</span>
              <span>{{ productInfo.startTime }} - {{ productInfo.endTime }}</span>
            </div>
            <!-- sku选择器 -->
              <Sku
                :sku-data="skuData"
                v-model:sku="selectedSku"
                v-model:quantity="quantity"
              />
            <!-- 参与按钮 -->
            <div class="actions">
              <el-button 
                type="primary" 
                size="large" 
                :disabled="!canJoin"
                @click="handleJoin"
              >
                立即参与
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 项目详情 -->
    <el-card class="detail-card">
      <template #header>
        <div class="card-header">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="项目介绍" name="intro">
              <div class="project-intro" v-html="productInfo.detail"></div>
            </el-tab-pane>
            <el-tab-pane label="常见问题" name="faq">
              <div class="faq-list">
                <el-collapse>
                  <el-collapse-item
                    v-for="(faq, index) in productInfo.faqs"
                    :key="index"
                    :title="faq.question"
                  >
                    {{ faq.answer }}
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
    </el-card>
  </div>

</div>

</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

// 示例数据
const productInfo = ref({
  id: 'AYL-8602',
  title: '清爽舒适，青年格子衬衫',
  description: '这款格子衬衫采用优质面料，保暖又舒适，独特的花纹设计。',
  mainImage: '/shirt1.jpg',
  images: ['/shirt1.jpg', '/shirt2.jpg', '/shirt3.jpg'],
  currentAmount: 4500,
  targetAmount: 10000,
  price: 150,
  initiator: '张三',
  startTime: '2023-07-01',
  endTime: '2024-12-01',
  detail: `
    <h3>项目介绍</h3>
    <p>欢迎来到我们的环保T恤系列！我们使用100%有机棉和回收材料，致力于创造舒适、时尚且环境友好的服装。我们的设计灵感来自大自然，希望让每个人在时尚与可持续之间找到完美平衡。</p>
  `,
  faqs: [
    {
      question: '什么时候发货？',
      answer: '众筹成功后15个工作日内发货'
    },
    {
      question: '如何退换货？',
      answer: '如有质量问题，支持7天无理由退换'
    }
  ]
})

const quantity = ref(1)
const activeTab = ref('intro')

// 计算众筹进度
const fundingProgress = computed(() => {
  return Math.floor((productInfo.value.currentAmount / productInfo.value.targetAmount) * 100)
})

// 计算剩余天数
const remainDays = computed(() => {
  const end = new Date(productInfo.value.endTime)
  const now = new Date()
  const diff = end - now
  return Math.max(0, Math.floor(diff / (1000 * 60 * 60 * 24)))
})

// 判断进度状态
const progressStatus = computed(() => {
  if (fundingProgress.value >= 100) return 'success'
  if (remainDays.value <= 0) return 'exception'
  return ''
})

// SKU 数据
const skuData = ref({
  colors: [
    { name: '蓝白格', value: 'blue-white',image: '/images/sku/blue-white.jpg'},
    { name: '红白格', value: 'red-white',image: '/images/sku/blue-white.jpg'},
    { name: '灰白格', value: 'grey-white',image: '/images/sku/blue-white.jpg'}
  ],
  sizes: ['S', 'M', 'L', 'XL', 'XXL'],
  // SKU 库存数据
  skuList: [
    { color: 'blue-white', size: 'S', stock: 100 },
    { color: 'blue-white', size: 'M', stock: 200 },
    { color: 'blue-white', size: 'L', stock: 300 },
    { color: 'blue-white', size: 'XL', stock: 200 },
    { color: 'blue-white', size: 'XXL', stock: 100 },
    { color: 'red-white', size: 'S', stock: 100 },
    { color: 'red-white', size: 'M', stock: 200 },
    { color: 'red-white', size: 'L', stock: 300 },
    { color: 'red-white', size: 'XL', stock: 200 },
    { color: 'red-white', size: 'XXL', stock: 100 },
    { color: 'grey-white', size: 'S', stock: 100 },
    { color: 'grey-white', size: 'M', stock: 200 },
    { color: 'grey-white', size: 'L', stock: 300 },
    { color: 'grey-white', size: 'XL', stock: 200 },
    { color: 'grey-white', size: 'XXL', stock: 100 }
  ]
})

// 选中的 SKU
const selectedSku = ref({
  color: '',
  size: ''
})



// 修改参与按钮逻辑
const canJoin = computed(() => {
  return remainDays.value > 0 && 
         fundingProgress.value < 100 && 
         selectedSku.value.color && 
         selectedSku.value.size &&
         quantity.value > 0
})

// 修改参与众筹方法
const handleJoin = () => {
  if (!selectedSku.value.color || !selectedSku.value.size) {
    ElMessage.warning('请选择商品规格')
    return
  }
  
  if (!canJoin.value) {
    ElMessage.warning('众筹已结束或库存不足')
    return
  }
  console.log(selectedSku.value)
  
  // router.push({
  //   path: '/payment',
  //   query: {
  //     id: productInfo.value.id,
  //     color: selectedSku.value.color,
  //     size: selectedSku.value.size,
  //     quantity: quantity.value,
  //     amount: quantity.value * productInfo.value.price
  //   }
  // })
}
</script>

<style lang="scss" scoped>
.crowdfunding-detail {
  padding: 20px;
  
  .product-card {
    margin-bottom: 20px;
    
    .product-gallery {
      .main-image {
        width: 100%;
        height: 400px;
        margin-bottom: 10px;
      }
      
      .thumb-list {
        display: flex;
        gap: 10px;
        
        .thumb-image {
          width: 80px;
          height: 80px;
          cursor: pointer;
          border: 2px solid transparent;
          
          &:hover {
            border-color: #409EFF;
          }
        }
      }
    }
    
    .product-info {
      padding: 0 20px;
      
      .title {
        font-size: 24px;
        margin: 0 0 15px;
      }
      
      .desc {
        color: #666;
        margin-bottom: 20px;
      }
      
      .funding-progress {
        background: #f8f8f8;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
        
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 15px;
        
        .number {
          display: block;
          font-size: 24px;
          font-weight: bold;
          color: #409EFF;
        }
        
        .label {
          font-size: 14px;
          color: #666;
        }
      }
      
      .initiator,
      .funding-time {
        margin-bottom: 15px;
        color: #666;
        
        .label {
          color: #333;
        }
      }
      
      .price-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20px 0;
        
        .price {
          .symbol {
            font-size: 16px;
            color: #ff6b6b;
          }
          
          .number {
            font-size: 28px;
            font-weight: bold;
            color: #ff6b6b;
          }
        }
      }
      
      .actions {
        text-align: center;
      }
    }
  }
  
  .detail-card {
    .project-intro {
      padding: 20px;
      
      img {
        max-width: 100%;
      }
    }
    
    .faq-list {
      padding: 20px;
    }
  }
}
.sku-section {
  margin: 20px 0;
  
  .sku-row {
    margin-bottom: 15px;
    
    .sku-label {
      font-size: 14px;
      color: #333;
      margin-bottom: 8px;
    }
    
    .sku-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      
      .sku-option {
        padding: 6px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        
        &:hover {
          border-color: #409EFF;
        }
        
        &.active {
          color: #409EFF;
          border-color: #409EFF;
          background-color: #ecf5ff;
        }
        
        &.disabled {
          cursor: not-allowed;
          color: #999;
          background-color: #f5f5f5;
          border-color: #ddd;
          
          &:hover {
            border-color: #ddd;
          }
        }
      }
      
      .color-option {
        display: flex;
        align-items: center;
        gap: 5px;
        
        .color-block {
          width: 16px;
          height: 16px;
          border-radius: 2px;
          border: 1px solid #ddd;
        }
      }
    }
  }
  
  .stock-info {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
  }
}
</style>